import React, { Component } from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { Split, TitleLine, TextLine, TextCell } from '@components/ApprovePre/Approve'
import style from './index.module.less'

export default class BusinessLeaderHistory extends Component {
  state = {
    varsMap: {}
  }

  // 初始化vars映射对象
  initVarsMap () {
    const varsMap = {}
    const vars = (this.props.action || {}).vars || []
    vars.forEach(li => {
      varsMap[li.key] = li.value
    })
    this.setState({ varsMap })
  }

  // 格式化日期
  formatDate (date) {
    if (date) {
      return moment(date * 1000).format('YYYY-MM-DD HH:mm')
    }
  }

  componentDidUpdate (prev) {
    if (prev.action !== this.props.action) {
      this.initVarsMap()
    }
  }

  componentDidMount () {
    this.initVarsMap()
  }

  // 渲染仲裁员详情链接
  renderArbitratorLink (name, id) {
    let names = []
    let ids = []
    if (typeof name === 'string' && name.length > 0) {
      names = name.split(',')
    }
    if (typeof id === 'string' && id.length > 0) {
      ids = id.split(',')
    }
    return names.map((li, i) => {
      return (
        <span className={style.person} key={i}>
          <a onClick={() => this.props.showArbitratorDetail(ids[i])}>{li}</a>
        </span>
      )
    })
  }

  renderDesc () {
    const varsMap = this.state.varsMap
    if (varsMap.zuting_biz_leader_select_info) {
      return (<TextLine>{varsMap.zuting_biz_leader_select_info}</TextLine>)
    }
    const str = []
    if (varsMap.arbitrator_recommend) {
      str.push(<TextLine key={1}>推荐7名仲裁员：{this.renderArbitratorLink(varsMap.arbitrator_recommend, varsMap.arbitratorid_recommend)}</TextLine>)
    }
    if (varsMap.arbitrator1_recommend) {
      str.push(<TextLine key={2}>推荐7名仲裁员：{this.renderArbitratorLink(varsMap.arbitrator1_recommend, varsMap.arbitratorid1_recommend)}</TextLine>)
    }
    if (varsMap.arbitrator2_recommend) {
      str.push(<TextLine key={3}>推荐7名仲裁员：{this.renderArbitratorLink(varsMap.arbitrator2_recommend, varsMap.arbitratorid2_recommend)}</TextLine>)
    }
    return str
  }

  render () {
    const { action } = this.props
    return (
      <div>
        <TitleLine title={this.props.action.step_name} operator={action.operator} time={this.formatDate(action.complete_datetime)} />
        <TextLine>
          <TextCell>操作：{action.action_name}</TextCell>
          <Split />
          <TextCell style={{ width: '65%' }}>备注：{action.remark || '无'}</TextCell>
        </TextLine>
        {this.renderDesc()}
        {this.props.renderDocument()}
      </div>
    )
  }
}

BusinessLeaderHistory.proptypes = {
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  action: PropTypes.object,
  caseDetail: PropTypes.object,
  renderDocument: PropTypes.func,
  showArbitratorDetail: PropTypes.func
}

BusinessLeaderHistory.defaultProps = {
  userInfo: {},
  instance: {},
  action: {},
  caseDetail: {},
  renderDocument: () => {},
  showArbitratorDetail: () => {}
}
